<!-- 确认费用 -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="fee-list">
    <div v-for="(item, index) in feeList" :key="index" style="margin: 0 20px">
      <feeitem :fee="item" />
    </div>
    <div class="all-cost">
      <span>合计</span>
      <div class="cost-num">
        <div>{{ costType == 10 ? '应收' : '应付' }}：{{ feeCostAmount.receiveAmount }}元</div>
        <div style="margin-top: 16px">{{ costType == 10 ? '待收' : '待付' }}：{{ feeCostAmount.receivedNotAmount }}元</div>
      </div>
    </div>
  </div>

  <page-form :model="form" layout="vertical" ref="formRef" style="margin-top: 40px">
    <page-form-row>
      <page-form-item
        field="paymentTime"
        :label="costName + '时间'"
        :rules="[{ required: true, message: '请选择' + costName + '时间', trigger: 'change' }]"
      >
        <i-date-picker class="w-full" v-model="form.paymentTime" show-time value-format="YYYY-MM-DD HH:mm:ss" />
      </page-form-item>
      <page-form-item
        field="paymentWay"
        :label="costName + '方式'"
        :rules="{ required: true, message: '请选择' + costName + '方式' }"
        labelTooltipContent="收/付款方式支持在系统管理菜单下的收支账号管理页面进行配置。"
      >
        <a-select placeholder="请选择" v-model="form.paymentWay" @change="typeChange">
          <a-option v-for="item in paywayEnum" :key="item.way" :value="item.way" :label="item.wayStr" />
        </a-select>
      </page-form-item>
      <page-form-item
        field="account"
        :label="costName + '账号'"
        labelTooltipContent="收/付款账号支持在系统管理菜单下的收支账号管理页面进行配置。"
      >
        <a-select
          :placeholder="!form.paymentWay ? '请先选择' + costName + '方式' : '请选择'"
          v-model="form.account"
          :disabled="!form.paymentWay ? true : false"
        >
          <a-option v-for="item in accountList" :key="item.id" :value="item.id" :label="item.account" />
        </a-select>
      </page-form-item>
      <page-form-item field="actualAmount" :label="costName + '金额'" :rules="{ required: true, message: '请输入' + costName + '金额' }">
        <i-input-number v-model="form.actualAmount" unit="元" :precision="2" disabled />
      </page-form-item>
      <page-form-item field="customerName" label="客户名称" :rules="{ required: true, message: '请输入客户名称' }">
        <i-input placeholder="请输入" v-model="form.customerName" :max-length="20" />
      </page-form-item>
      <page-form-item field="customerAccount" :label="costName == '收款' ? '客户付款账号' : '客户收款账号'">
        <i-input placeholder="请输入" v-model="form.customerAccount" :max-length="20" />
      </page-form-item>
      <page-form-item field="settlementRemark" label="结算备注" size="2/3">
        <i-input placeholder="请输入" v-model="form.settlementRemark" :max-length="200" />
      </page-form-item>
    </page-form-row>
  </page-form>
  <page-form-footer @ok="submitFn" :ok-loading="okLoading" />
</template>

<script setup name="CostConfirmFee">
  import feeitem from '../components/comfirm-fee-item.vue'
  import { getAccountByPageData, getAccountByWayAndType, feetoConfirm } from '@/api/order/sOrder'
  import { feeSubmit } from '@/api/finance/costConfirm'
  import { ref, onMounted, computed } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  const { navigateBack } = useNavigate()
  import { useRoute } from 'vue-router'
  const route = useRoute()
  // const costType = ref(null) // type  0-收款，1-付款，3-收款&付款  (合计 正-收款  负-付款)
  const paywayEnum = ref([]) //收付款方式
  const accountList = ref([]) //收付款账号列表
  const costType = ref(null) // 收支类型 10 收款 20 付款
  const costName = ref('')
  const feeList = ref([]) // 收付款列表
  const feeCostAmount = ref({}) //收付款类型及金额
  const formRef = ref(null)
  const form = ref({
    idList: [], //结算单ids
    orderId: '',
  })
  // 去确认
  const feeConfirm = (ids) => {
    feetoConfirm({ idList: ids }).then((res) => {
      feeCostAmount.value = res.result
      feeList.value = res.result.orderFeeList
      form.value.actualAmount = res.result.receiveAmount //固定金额，不可修改
      costType.value = res.result.costType
      if (costType.value == 10) {
        costName.value = '收款'
      } else {
        costName.value = '付款'
      }
      getType(res.result.cost)
    })
  }
  // 收付款类型
  const getType = () => {
    getAccountByPageData({ type: costType.value == 10 ? 0 : 1 }).then((res) => {
      paywayEnum.value = res.result
    })
  }
  // 账号
  const typeChange = (e) => {
    if (e) {
      form.value.account = ''
    }
    getAccountByWayAndType({ way: Number(e), type: costType.value == 10 ? 0 : 1 }).then((res) => {
      accountList.value = res.result
    })
  }

  const queryObj = computed(() => {
    if (route.params.id) {
      let obj = JSON.parse(route.params.id)
      return obj ? obj : undefined
    } else {
      return undefined
    }
  })
  console.log(queryObj)
  if (queryObj.value) {
    form.value.idList = [queryObj.value.id]
    form.value.orderId = queryObj.value.orderId
    feeConfirm([queryObj.value.id])
  }
  // watch(
  //   () => routePrams.params,
  //   (newVal) => {
  //     if (newVal) {
  //       var pageParams = JSON.parse(routePrams.params)
  //       console.log(pageParams)
  //       form.value.orderId = pageParams.orderId
  //       form.value.idList = pageParams.ids
  //       feeConfirm(pageParams.ids) //判断收款还是付款
  //     }
  //   },
  //   { immediate: true }
  // )
  const okLoading = ref(false)
  const submitFn = (noticeSuccess) => {
    formRef.value.validate((error) => {
      if (!error) {
        okLoading.value = true
        const param = {
          ...form.value,
        }
        feeSubmit(param)
          .then(() => {
            noticeSuccess()
            navigateBack()
          })
          .finally(() => {
            okLoading.value = false
          })
      }
    })
  }
  onMounted(() => {
    // getType()
  })
</script>

<style lang="less" scoped>
  .fee-list {
    padding-top: 20px;
    margin-bottom: 80px;
    border: 1px solid #f2f3f5;
  }
  .all-cost {
    font-weight: 600;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #f2f3f5;
    height: 100px;
    .cost-num {
      color: #1890ff;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }
</style>
